<template>
	<view class="container">
		<view class="header">
			<view class="student-info-box">
				<image class="avatar" :src="getStudentAvatar(studentId)" mode="aspectFill"></image>
				<view class="info-text">
					<text class="name">{{studentName}}</text>
					<text class="grade">{{grade}}</text>
				</view>
			</view>
			<text class="title">选择零食</text>
		</view>
		
		<view class="category-tabs">
			<view 
				class="tab-item" 
				v-for="category in categories" 
				:key="category.id"
				@click="selectCategory(category.id)"
				:class="{active: currentCategory === category.id}"
			>
				{{category.name}}
			</view>
		</view>
		
		<view class="snack-grid">
			<view class="snack-card" v-for="snack in filteredSnacks" :key="snack.id">
				<view class="snack-badge" v-if="snack.tag">{{snack.tag}}</view>
				<image class="snack-image" :src="snack.image" mode="aspectFill"></image>
				<view class="snack-info">
					<text class="snack-name">{{snack.name}}</text>
					<text class="snack-desc">{{snack.description}}</text>
					<view class="price-control">
						<text class="snack-price">¥{{snack.price}}</text>
						<view class="quantity-control">
							<button class="quantity-btn minus" @click="decreaseQuantity(snack)" :disabled="getCartItemQuantity(snack.id) <= 0">
								<text class="iconfont icon-minus"></text>
							</button>
							<text class="quantity">{{getCartItemQuantity(snack.id)}}</text>
							<button class="quantity-btn plus" @click="increaseQuantity(snack)">
								<text class="iconfont icon-plus"></text>
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cart-preview" @click="showCart = true" v-if="cartItems.length > 0">
			<view class="cart-icon">
				<text class="iconfont icon-cart"></text>
				<text class="cart-count">{{totalQuantity}}</text>
			</view>
			<text class="total-price">¥{{totalPrice.toFixed(2)}}</text>
			<text class="checkout-text">去结算</text>
		</view>
		
		<!-- 购物车弹窗 -->
		<view class="cart-modal" v-if="showCart">
			<view class="cart-container">
				<view class="cart-header">
					<text class="cart-title">购物车</text>
					<text class="iconfont icon-close" @click="showCart = false"></text>
				</view>
				<view class="cart-list">
					<view class="cart-item" v-for="item in cartItems" :key="item.snack.id">
						<image class="cart-image" :src="item.snack.image" mode="aspectFill"></image>
						<view class="cart-info">
							<text class="cart-name">{{item.snack.name}}</text>
							<text class="cart-price">¥{{item.snack.price}}</text>
						</view>
						<view class="cart-quantity">
							<button class="quantity-btn minus" @click="decreaseQuantity(item.snack)">
								<text class="iconfont icon-minus"></text>
							</button>
							<text class="quantity">{{item.quantity}}</text>
							<button class="quantity-btn plus" @click="increaseQuantity(item.snack)">
								<text class="iconfont icon-plus"></text>
							</button>
						</view>
					</view>
				</view>
				<view class="cart-footer">
					<text class="total-text">共{{totalQuantity}}件</text>
					<text class="total-price">合计: ¥{{totalPrice.toFixed(2)}}</text>
					<button class="checkout-btn" @click="goToOrderConfirm">去结算</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		globalVariable
	} from '../../configMy.js';
	export default {
		name: "snack-selection",
		data() {
			return {
				studentId: '',
				studentName: '',
				parentName: '',
				phoneNumber: '',
				grade: '',
				categories: [
					{ id: 0, name: '全部' },
					{ id: 1, name: '零食' },
					{ id: 2, name: '饮品' },
					{ id: 3, name: '健康' }
				],
				currentCategory: 0,
				snacks: [],
				cartItems: [],
				showCart: false
			};
		},
		computed: {
			// 过滤当前分类的零食
			filteredSnacks() {
				if (this.currentCategory === 0) {
					return this.snacks;
				}
				return this.snacks.filter(snack => snack.category === this.currentCategory);
			},
			// 计算总价
			totalPrice() {
				return this.cartItems.reduce((total, item) => {
					return total + (item.snack.price * item.quantity);
				}, 0);
			},
			// 计算总数量
			totalQuantity() {
				return this.cartItems.reduce((total, item) => {
					return total + item.quantity;
				}, 0);
			}
		},
		onLoad(options) {
			this.studentId = options.studentId;
			this.studentName = options.studentName;
			this.parentName = options.parentName;
			this.phoneNumber = options.phoneNumber;
			this.grade = options.grade;
			
			this.fetchSnacks();
		},
		methods: {
			// 获取学生头像
			getStudentAvatar() {
				return globalVariable + '/get/student_avatar_' + this.studentId + '.jpg';
			},
			
			// 获取零食列表
			async fetchSnacks() {
				// 这里可以替换为实际的API请求
				this.snacks = [
					{ 
						id: 1, 
						name: '香脆薯片', 
						price: 5.5, 
						stock: 100,
						category: 1,
						description: '经典原味，酥脆可口',
						image: '/static/snacks/chips.png',
						tag: '热销'
					},
					{ 
						id: 2, 
						name: '牛奶巧克力', 
						price: 8.0, 
						stock: 80,
						category: 1,
						description: '丝滑口感，浓郁奶香',
						image: '/static/snacks/chocolate.png',
						tag: '新品'
					},
					{ 
						id: 3, 
						name: '夹心饼干', 
						price: 4.0, 
						stock: 120,
						category: 1,
						description: '酥脆饼干，甜蜜夹心',
						image: '/static/snacks/cookies.png'
					},
					{ 
						id: 4, 
						name: '鲜榨果汁', 
						price: 3.5, 
						stock: 150,
						category: 2,
						description: '100%纯果汁，多种口味',
						image: '/static/snacks/juice.png',
						tag: '健康'
					},
					{ 
						id: 5, 
						name: '水果果冻', 
						price: 2.5, 
						stock: 200,
						category: 1,
						description: 'Q弹口感，水果风味',
						image: '/static/snacks/jelly.png'
					},
					{ 
						id: 6, 
						name: '混合坚果', 
						price: 10.0, 
						stock: 60,
						category: 3,
						description: '多种坚果混合，营养丰富',
						image: '/static/snacks/nuts.png',
						tag: '推荐'
					},
					{ 
						id: 7, 
						name: '酸奶饮品', 
						price: 4.5, 
						stock: 90,
						category: 2,
						description: '活性乳酸菌，促进消化',
						image: '/static/snacks/yogurt.png'
					},
					{ 
						id: 8, 
						name: '海苔脆片', 
						price: 6.0, 
						stock: 70,
						category: 3,
						description: '低卡路里，香脆美味',
						image: '/static/snacks/seaweed.png',
						tag: '健康'
					}
				];
			},
			
			// 选择分类
			selectCategory(categoryId) {
				this.currentCategory = categoryId;
			},
			
			// 增加数量
			increaseQuantity(snack) {
				const existingItem = this.cartItems.find(item => item.snack.id === snack.id);
				
				if (existingItem) {
					existingItem.quantity++;
				} else {
					this.cartItems.push({
						snack: snack,
						quantity: 1
					});
				}
				
				// 显示添加动画效果
				this.showAddAnimation(snack.id);
			},
			
			// 减少数量
			decreaseQuantity(snack) {
				const existingItemIndex = this.cartItems.findIndex(item => item.snack.id === snack.id);
				
				if (existingItemIndex !== -1) {
					const existingItem = this.cartItems[existingItemIndex];
					
					if (existingItem.quantity > 1) {
						existingItem.quantity--;
					} else {
						this.cartItems.splice(existingItemIndex, 1);
					}
				}
			},
			
			// 获取购物车中某个零食的数量
			getCartItemQuantity(snackId) {
				const item = this.cartItems.find(item => item.snack.id === snackId);
				return item ? item.quantity : 0;
			},
			
			// 显示添加动画
			showAddAnimation(snackId) {
				uni.showToast({
					title: '已添加',
					icon: 'success',
					duration: 500
				});
			},
			
			// 跳转到订单确认页面
			goToOrderConfirm() {
				const orderData = {
					studentId: this.studentId,
					studentName: this.studentName,
					parentName: this.parentName,
					phoneNumber: this.phoneNumber,
					grade: this.grade,
					cartItems: this.cartItems,
					totalPrice: this.totalPrice
				};
				
				// 将订单数据转为JSON字符串传递
				const orderDataStr = encodeURIComponent(JSON.stringify(orderData));
				
				uni.navigateTo({
					url: `/pages/snack-order/order-confirm?orderData=${orderDataStr}`
				});
			}
		}
	}
</script>

<style>
	.container {
		padding: 30rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
		padding-bottom: 150rpx;
	}
	
	.header {
		margin-bottom: 30rpx;
	}
	
	.student-info-box {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		background-color: #f0f9ff;
		padding: 20rpx;
		border-radius: 16rpx;
	}
	
	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		background-color: #eee;
		border: 2rpx solid #d9e9ff;
	}
	
	.info-text {
		flex: 1;
	}
	
	.name {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.grade {
		font-size: 26rpx;
		color: #666;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.category-tabs {
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
	}
	
	.tab-item {
		padding: 12rpx 30rpx;
		margin-right: 20rpx;
		border-radius: 30rpx;
		background-color: #f0f0f0;
		color: #666;
		font-size: 28rpx;
		flex-shrink: 0;
	}
	
	.tab-item.active {
		background: linear-gradient(90deg, #1890ff, #36c6ff);
		color: #fff;
		font-weight: bold;
	}
	
	.snack-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}
	
	.snack-card {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		position: relative;
	}
	
	.snack-badge {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		background-color: #ff4d4f;
		color: #fff;
		font-size: 22rpx;
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
		z-index: 1;
	}
	
	.snack-image {
		width: 100%;
		height: 240rpx;
		background-color: #f5f5f5;
	}
	
	.snack-info {
		padding: 20rpx;
	}
	
	.snack-name {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.snack-desc {
		font-size: 24rpx;
		color: #999;
		display: block;
		margin-bottom: 20rpx;
		height: 60rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.price-control {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.snack-price {
		font-size: 32rpx;
		color: #ff4d4f;
		font-weight: bold;
	}
	
	.quantity-control {
		display: flex;
		align-items: center;
	}
	
	.quantity-btn {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		margin: 0;
		background-color: #f0f0f0;
	}
	
	.quantity-btn.minus {
		color: #999;
	}
	
	.quantity-btn.plus {
		background-color: #1890ff;
		color: #fff;
	}
	
	.quantity-btn[disabled] {
		opacity: 0.5;
	}
	
	.quantity {
		font-size: 28rpx;
		min-width: 60rpx;
		text-align: center;
		color: #333;
	}
	
	.cart-preview {
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		right: 30rpx;
		background-color: #fff;
		border-radius: 50rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		z-index: 99;
	}
	
	.cart-icon {
		position: relative;
	}
	
	.cart-icon .iconfont {
		font-size: 44rpx;
		color: #1890ff;
	}
	
	.cart-count {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		background-color: #ff4d4f;
		color: #fff;
		font-size: 22rpx;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.total-price {
		font-size: 32rpx;
		color: #ff4d4f;
		font-weight: bold;
	}
	
	.checkout-text {
		font-size: 30rpx;
		color: #fff;
		background: linear-gradient(90deg, #1890ff, #36c6ff);
		padding: 10rpx 30rpx;
		border-radius: 40rpx;
		font-weight: bold;
	}
	
	/* 购物车弹窗 */
	.cart-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 100;
		display: flex;
		align-items: flex-end;
	}
	
	.cart-container {
		width: 100%;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		max-height: 70vh;
		display: flex;
		flex-direction: column;
	}
	
	.cart-header {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.cart-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.cart-header .iconfont {
		font-size: 36rpx;
		color: #999;
	}
	
	.cart-list {
		flex: 1;
		overflow-y: auto;
		padding: 0 30rpx;
	}
	
	.cart-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.cart-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
		background-color: #f5f5f5;
	}
	
	.cart-info {
		flex: 1;
	}
	
	.cart-name {
		font-size: 30rpx;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.cart-price {
		font-size: 28rpx;
		color: #ff4d4f;
	}
	
	.cart-quantity {
		display: flex;
		align-items: center;
	}
	
	.cart-quantity .quantity-btn {
		width: 50rpx;
		height: 50rpx;
	}
	
	.cart-quantity .quantity {
		min-width: 60rpx;
		text-align: center;
	}
	
	.cart-footer {
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx solid #f0f0f0;
	}
	
	.total-text {
		font-size: 28rpx;
		color: #666;
	}
	
	.cart-footer .total-price {
		font-size: 36rpx;
		color: #ff4d4f;
		font-weight: bold;
		margin: 0 20rpx;
	}
	
	.checkout-btn {
		background: linear-gradient(90deg, #1890ff, #36c6ff);
		color: #fff;
		border-radius: 40rpx;
		padding: 0 40rpx;
		height: 80rpx;
		font-size: 30rpx;
		font-weight: bold;
	}
	
	/* 图标字体 */
	@font-face {
		font-family: 'iconfont';
		src: url('https://at.alicdn.com/t/font_1234567_abcdefghijk.woff2') format('woff2'),
			url('https://at.alicdn.com/t/font_1234567_abcdefghijk.woff') format('woff'),
			url('https://at.alicdn.com/t/font_1234567_abcdefghijk.ttf') format('truetype');
	}
	
	.iconfont {
		font-family: 'iconfont' !important;
		font-size: 32rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
</style>